<template>
	<view>
		<navBar title="选择每日施工计划" @goBack="uni.navigateBack()"></navBar>

		<view class="construction-plan-list">
			<u-search ref="search" class="search-input" placeholder="请输入关键字"  v-model="searchValue"
				:showAction="false" clearabled @search="confirmSearch" @change="clearCondition(1,$event)"></u-search>
			<view @click="showDate=true" style="margin-top: 28rpx;">
				<view style="position: relative;display: flex;align-items: center;">
					<u-search ref="search" class="search-input" placeholder="施工日期"  disabled
						 v-model="constructionStartTime" :showAction="false" clearabled  @change="clearCondition(2,$event)"></u-search>
					<u-icon name="calendar" class="right-icon" size="25"></u-icon>
				</view>
				<view style="height: 30upx;"></view>
			</view>
			<scroll-view scroll-y class="container" style="height: calc(100vh - 240px - 70px);">
				<view class="list">
					<u-radio-group v-model="constructionPlanValue" placement="column">
						<view @click="checkItem(item)" v-for="(item, index) in constructionPlanList" :key="index"
							class="list-item">
							<view class="left-item">
								<view class="title">{{ item.pmName }}</view>
								<view>线路名称：{{ item.lineSiteList[0].name }}</view>
								<view>区间站点：{{ extractLowestLevelList(item.lineSiteList).map(it => it.name).join(",") }}
								</view>
								<view>提交时间：{{ getDate2(item.recordCreateDate) }}</view>
								<view>提交人员：{{ item.creatorUserName }}</view>
							</view>
							<view class="right-item">
								<u-radio :name="item.id" @change="getSelectVal(item)"></u-radio>
							</view>
						</view>
					</u-radio-group>
				</view>
			</scroll-view>

		</view>
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button @click="confirm" :loading="isLoading" class="button-primary">确定</button>
			</view>
		</view>
		<u-datetime-picker @cancel="dateCancel" @confirm="dateConfirm" :show="showDate" v-model="constructionDate"
			mode="date" ></u-datetime-picker>
	</view>
</template>

<script>
import {
		constructionPlan_list
	} from '@/api/comprehensive/comprehensive.js'
	import mixins from "@/utils/mixins.js"
	export default {
		mixins: [mixins],
		data() {
			return {
				constructionPlanList: [],
				searchValue: '',
				constructionPlanValue: null,
				showDate: false,
				constructionDate: Number(new Date()),
				isLoading: false,
				selectedPlan: {},
				constructionStartTime:'',
				constructionEndTime:'',
				paging: {
					pageNum: 1,
					pageSize: 20,
					total: 0,
				},
				type:''
			}
		},
		async onLoad(op) {
			if(op && op.type) {
				this.type = op.type
				console.debug(this.type,'leixing')
				this.constructionPlanList = await this.getList();
			}
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('getList', (data) => {
				this.constructionPlanValue = data.data.id
				this.selectedPlan = data.data
			})
			this.eventChannel = eventChannel
		},
		methods: {
			async confirmSearch(val) {
				this.searchValue = val
				this.paging.pageNum = 1
				this.constructionPlanList = await this.getList()
			},
			async clearCondition(type, event) {
				if(!event) {
					if(type === 1) {
						this.searchValue = ''
					}else {
						this.constructionStartTime = ''
						this.constructionEndTime = ''
					}
				}
				this.paging.pageNum = 1
				this.constructionPlanList = await this.getList()
			},
			getSelectVal(item) {
				this.selectedPlan = item
				uni.navigateBack({
					success: () => {
						this.eventChannel.emit("setData", {
							data: item
						})
					}
				});
			},
			confirm() {
				if (!Object.keys(this.selectedPlan).length) {
					uni.showToast({
						title: '请先选择施工计划!',
						icon: "none"
					})
					return
				}
				uni.navigateBack({
					success: () => {
						this.eventChannel.emit("setData", {
							data: this.selectedPlan
						})
					}
				});
			},
			checkItem(data) {
				uni.navigateTo({
					url: `/subpackage-enginner/pages/engineeringMaintenance/jianKong/planDetails?id=${data.id}`
				})
			},
			async dateConfirm(val) {
				this.constructionStartTime = this.getDate(val.value)
				this.constructionEndTime = this.getDate(val.value)
				this.paging.pageNum = 1
				this.constructionPlanList = await this.getList()
				this.showDate = false
			},
			async dateCancel(){
				this.constructionStartTime = ''
				this.constructionEndTime = ''
				this.paging.pageNum = 1
				this.constructionPlanList = await this.getList()
				this.showDate = false
			},
			getList() {
				return new Promise(resolve => {
					const { pageNum, pageSize } = this.paging;
					constructionPlan_list({
						currPage: pageNum,
						pageSize,
						projectId:uni.getStorageSync("isOwner"),
						params: {
							code: this.type,
							projectId:uni.getStorageSync("isOwner"),
							constructionStartTime:this.constructionStartTime ? this.constructionStartTime + ' ' +  '00:00:00' : '',
							constructionEndTime:this.constructionEndTime ? this.constructionEndTime  + ' ' + '23:59:59' : '',
							keyword:this.searchValue,
							state:1
						}
					}).then(async res => {
						if (!res.success) return
						const { list, total } = res.result;
						this.paging.total = total;
						resolve(list)
					})
				})
			},
			//获取树形数据最后一个list
			extractLowestLevelList(data) {
				let result = [];
				for (let i = 0; i < data.length; i++) {
					if (data[i].list) {
						result = result.concat(this.extractLowestLevelList(data[i].list));
					} else {
						result.push(data[i]);
					}
				}
				return result;
			},
			/** 容器滚动到底部 */
			async scrolltolower() {
				// 判断是否有下一页
				if(!this.isLoading && this.paging.pageNum * this.paging.pageSize < this.paging.total) {
					// 加载...
					this.isLoading = true;
					this.paging.pageNum++;
					this.constructionPlanList = this.constructionPlanList.concat(await this.getList());
					this.isLoading = false;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.construction-plan-list {
		border-top: 10px solid #f5f7fa;
		padding: 10px;
		background: #fff;
		/* #ifdef MP-WEIXIN */
			padding-top: 180rpx;
		/* #endif */
		.list {
			padding: 0 20px;

			.list-item {
				color: #445469;
				font-size: 14px;
				line-height: 28px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1px solid #e9eef9;
				padding-bottom: 10px;

				&:nth-child(1) {
					border-top: none;
				}

				.left-item {
					width: 100%;

					>view {
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						width: 100%;
					}

					.title {
						color: #22204e;
						line-height: 55px;
						font-size: 16px;
					}
				}

				.right-item {
					flex-shrink: 0;
				}
			}
		}
	}

	/deep/ .right-icon.u-icon__icon {
		position: absolute !important;
		right: 50rpx;
		bottom: 52upx
	}
</style>
